<template>
  <view class="content">
    <div class="box">
      <div class="money">
        <div class="t">
          <div class="num">
            <p>待提现（元）</p>
            <p>{{ userInfo.amount | formatDecimal }}</p>
          </div>
          <div class="details" @click="details">
            <a style="position: relative; bottom: 1.5px">收益明细</a>
            <uni-icons type="forward" size="20" color="#aaa"></uni-icons>
          </div>
        </div>
        <div class="b" >
          <div class="li">
            <p>今日收益（元）</p>
            <p>{{ today | formatDecimal }}</p>
          </div>
          <div class="li">
            <p>累计收益</p>
            <p>{{ userInfo.amountCont | formatDecimal}}</p>
          </div>
          <div class="deposit" @click="deposit">提现</div>
        </div>
      </div>
    </div>


  <div class="commission">
    【佣金结算规则】
    <div class="c">
      <div v-html="config.settlement "></div>
    </div>
  </div>

  </view>
</template>

<script>
import Api from "../../API/api";
export default {
  data() {
    return {
      // userInfo:{agentLevel:{}}
      userInfo:{
        amount:0
      },
      today:0,
      config : {}
    }
  },
  filters: {
    formatDecimal(value) {
      // 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
      return Number(value).toFixed(2);
    },
  },
  onShow(){
    this.config = uni.getStorageSync("config")
  },
  onLoad() {
    Api.getwxuser().then(res=>{
      this.userInfo = res.data;
      console.log(this.userInfo)
    })
    Api.getDay().then(res=>{
      this.today = res.data
    })

  },
  methods: {
    //收益明细
    details(){
      uni.navigateTo({
        url : "/pages/index/money"
      })

    },
    //提现
    deposit(){
      uni.navigateTo({
        url : "/pages/index/withdraw"
      })
    }
    }
}
</script>

<style lang="less" scoped>
page {
  background-color: #f3f4f8;
}

.content {
  .commission{
    position: relative;
    font-size: 30rpx;
    top: 150rpx;
    left: 20rpx;
    .c{
      position: relative;
      top: 20rpx;
      width: 90%;
      left: 20rpx;
      color: #ccc;
      color: #070E2F;
    }
  }
  .box {
    transform: translateY(-150rpx);
    width: 90%;
    margin: auto;

    .money {
      position: relative;
      top: 220rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 0.8);
      box-sizing: border-box;
      padding: 20rpx 20rpx 0 20rpx;
      height: 120pt;
      .t {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-left: 20rpx;
        p {
          &:nth-child(1) {
            color: #070E2F;
            font-size: 28rpx;
            color: #ccc;
          }

          &:nth-child(2) {
            color: #000;
            font-weight: 700;
            font-size: 56rpx;
          }
        }

        .details {
          transform: translateX(20rpx);
          margin-right: 30rpx;
          //color: #ccc;
          color: #697BA0;
          image {
            width: 200rpx;
          }
        }
      }

          //中间
      .b {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-left: 15rpx;
        color: #070E2F;

        .deposit {
          margin-left: 20rpx;
          margin-right: 30rpx;
          width: 142rpx;
          height: 64rpx;
          text-align: center;
          line-height: 64rpx;
          border-radius: 32rpx;
          border: 2rpx solid #FD9509;
          color: #FD9509;

        }
        .li{
          color: #ccc;
        }
      }
    }
  }



}
</style>